<template>
    <div style="height: 50px;">
        <el-button @click="Export()">导出</el-button>
    </div>

    <!-- 查询条件 -->
    <el-form :inline="true" :model="show" class="demo-form-inline">
        <el-form-item label="退款计划">
            <el-input v-model="show.SalesReturnTopic" placeholder="退款计划" clearable />
        </el-form-item>
        <el-form-item label="退款日期">
            <el-date-picker v-model="show.SalesStart" type="date" placeholder="退款开始日期" clearable />-
            <el-date-picker v-model="show.SalesEnd" type="date" placeholder="退款结束日期" clearable />
        </el-form-item>
        <el-form-item label="客户名称">
            <el-input v-model="show.ClientName" placeholder="客户名称" @dblclick="dialogVisible = true" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="GetSalesReturnList()">查询</el-button>
        </el-form-item>
    </el-form>

    <!-- 显示列表 -->
    <h1 style="text-align: center;font-weight: bold;margin-top: 30px;margin-bottom: 30px;font-size: 30px;">应退销售款列表</h1>
    <el-table :data="SalesReturnlist" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column prop="salesReturnCode" label="销售退货编号" align="center" />
        <el-table-column prop="salesReturnTopic" label="销售退货主题" align="center" />
        <el-table-column prop="clientName" label="客户名称" align="center" />
        <el-table-column prop="salesReturnDate" label="退货日期" align="center">
            <template v-slot="scope">
                {{ scope.row.salesReturnDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="salesReturnAmout" label="退货总金额" align="center">
            <template v-slot="scope">
                {{ scope.row.salesReturnAmout.toFixed(2) }}
            </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="350px" align="center">
            <template v-slot="scope">
                <el-button v-if="scope.row.salesReturnAmout != 0"
                    @click="tui(scope.row.salesReturnId)">退款(直接退款)</el-button>
                <el-button v-if="scope.row.salesReturnAmout != 0"
                    @click="tui(scope.row.salesReturnId)">退款(转客户预收款)</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <table style="margin: auto;">
        <tr>
            <td>
                <el-pagination v-model:current-page="show.Pindex" v-model:page-size="show.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" layout="total,slot,sizes" :total="show.lcount">
                    <span> , 每页 {{ show.Psize }} 条，当前 {{ show.Pindex }} / {{ show.pcount }} 条</span>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="show.Pindex" v-model:page-size="show.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, prev, pager, next" :total="show.lcount">
                    <el-button :disabled="show.Pindex == 1" @click="show.Pindex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="show.Pindex" v-model:page-size="show.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, jumper" :total="show.lcount">
                    <el-button :disabled="show.Pindex == show.pcount" @click="show.Pindex = show.pcount">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>

    <!-- 客户名称弹框 -->
    <el-dialog v-model="dialogVisible" title="客户名称选择" width="1000" style="height: 700px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="Product" :props="defaultProps" default-expand-all="true" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="Show" border style="width: 100%" @selection-change="handleSelectionChange1">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="clientName" label="客户名称" align="center" />
                        <el-table-column prop="cName" label="客户行业" align="center" />
                        <el-table-column prop="provinceName" label="客户省份" align="center" />
                        <el-table-column prop="cityName" label="客户市区" align="center" />
                        <el-table-column prop="cPrimaryContact" label="联系人姓名" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible = false">
                保存
            </el-button>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import axios from 'axios'
import * as XLSX from 'xlsx';
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();
import http from '../../../http.js'

const dialogVisible = ref(false)

//查询条件
const show = reactive({
    Pindex: 1,
    Psize: 10,
    lcount: 0,
    pcount: 0,
    SalesReturnTopic: "",
    SalesStart: "",
    SalesEnd: "",
    ClientName: ""
})

//显示
const SalesReturnlist = ref([])
const GetSalesReturnList = () => {
    axios.get(http.zblnb + '/cw/api/SalesReturn/GetSalesShouldRefundList', {
        params: {
            Pindex: show.Pindex,
            Psize: show.Psize,
            SalesReturnTopic: show.SalesReturnTopic || '',
            SalesStart: show.SalesStart || '',
            SalesEnd: show.SalesEnd || '',
            ClientName: show.ClientName || '',
        }
    })
        .then(res => {
            console.log(res.data.data)
            SalesReturnlist.value = res.data.data.list;
            show.lcount = res.data.data.lcount;
            show.pcount = res.data.data.pcount;
        })
}


//#region  客户名称

const form = reactive({
    ClientName: '',
    CRecipients: '',
    STime: '',
    ETime: '',
    CPickingStatus: '',
    CApplicant: '',
    CIndustry: '',
    pageIndex: 1,
    pageSize: 5,
    totalCount: 0,
    pageCount: 0,
    SectorId: 0
})

//树形
var Product = ref([]);
const ProductType = () => {
    axios.get(http.zblnb + '/vendor/api/Client/ProductTypeSelect').then(res => {
        Product.value = res.data.data
        console.log(res.data.data)
    })
}
//显示
var Show = ref([]);
const GetShow = () => {
    axios.get(http.zblnb + '/vendor/api/Client/ClientAllShow', {
        params: {
            ClientName: form.ClientName,
            CRecipients: form.CRecipients,
            STime: form.STime,
            ETime: form.ETime,
            CPickingStatus: form.CPickingStatus,
            CApplicant: form.CApplicant,
            CIndustry: form.CIndustry,
            pageIndex: 1,
            pageSize: 5,
        }
    }).then(res => {
        Show.value = res.data.data.list
        console.log(res.data.data)
        form.totalCount = res.data.data.lcount
        form.pageCount = res.data.data.pcount
    })
}

//选择客户名称
const check1 = ref([])
const handleSelectionChange1 = (val: User[]) => {
    check1.value = val
    console.log(check1.value)
    show.ClientName = check1.value[0].clientName
}

const defaultProps = {
    children: 'children',
    label: 'label',
}


//#endregion


//导出
const Export = () => {
    ElMessageBox.confirm('是否确认导出?', '警告', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    })
        .then((res) => {
            if (check.value.length <= 0) {
                ElMessage.warning('请选择数据!');
                return;
            }
            //表头
            let tableData = [
                ['序号', '销售退货编号', '销售退货主题', '客户名称', '退货日期', '退货总金额']
            ]
            check.value.forEach((item, index) => {
                let rowData = []
                //导出内容的字段
                rowData = [
                    index + 1,
                    item.salesReturnCode,
                    item.salesReturnTopic,
                    item.clientName,
                    item.salesReturnDate,
                    item.salesReturnAmout,
                ]
                tableData.push(rowData)
            })
            let workSheet = XLSX.utils.aoa_to_sheet(tableData);
            let bookNew = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(bookNew, workSheet, '应退销售额') // 工作簿名称
            let name = '应退销售额' + '.xlsx'
            XLSX.writeFile(bookNew, name) // 保存的文件名
        })
}


//多选框
const check = ref([])
const handleSelectionChange = (val: User[]) => {
    check.value = val
    console.log(check.value)
}


//直接退款
const tui = (salesReturnId: any) => {
    console.log(salesReturnId)
    router.push('SalesDirectDebit?salesReturnId=' + salesReturnId);
}



onMounted(() => {
    GetSalesReturnList();
    ProductType();
    GetShow();
})



</script>

<style></style>